<template>
	<div id="main_container">
		<div class="info_container">
			<div class="info_image">
				<my-image class="image" type="items" :icon="item.iconUrl" :size="200"></my-image>
			</div>
			<div class="info_content">
				<h1 class="info_title">{{item.name}}</h1>
				<el-divider></el-divider>
				<el-descriptions class="description" :column="3" border>
					<el-descriptions-item>
						<template slot="label">
							<i class="el-icon-user"></i>
							物品名
						</template>
						{{ item.name }}
					</el-descriptions-item>
					<el-descriptions-item>
						<template slot="label">
							<i class="el-icon-coin"></i>
							堆叠数量
						</template>
						{{ item.stackSize }}
					</el-descriptions-item>
					<el-descriptions-item>
						<template slot="label">
							<i class="el-icon-location-outline"></i>
							物品种类
						</template>
						{{ item.type }}
					</el-descriptions-item>
					<el-descriptions-item contentClassName="item">
						<template slot="label">
							<i class="el-icon-tickets"></i>
							备注
						</template>
						{{ item.description }}
					</el-descriptions-item>
				</el-descriptions>
			</div>
		</div>
		<div class="recipe_container">
			<el-tabs v-model="activeName" stretch>
				<el-tab-pane label="合成配方" name="to">
					<div class="table">
						<recipe-show v-if="defaultRecipe != null" :recipe="defaultRecipe" class="show"></recipe-show>
						<recipe-show v-for="recipe of toRecipe" :key="recipe.id" :recipe="recipe"
							v-show='recipe.id != item.defaultRecipe' class="show"></recipe-show>
					</div>
				</el-tab-pane>
				<el-tab-pane label="使用配方" name="from">
					<div class="table">
						<recipe-show v-for="recipe of fromRecipe" :key="recipe.id" :recipe="recipe"
							class="show"></recipe-show>
					</div>
				</el-tab-pane>
				<el-tab-pane label="建筑材料" name="cost">
					<div class="table">
						<build-show v-for="build of builds" :key="builds.id" :build="build" class="show"></build-show>
					</div>
				</el-tab-pane>
			</el-tabs>
		</div>
	</div>
</template>

<script>
	import MyImage from "@/components/Image.vue";
	import RecipeShow from "@/components/RecipeShow.vue";
	import BuildShow from "@/components/BuildShow.vue";

	export default {
		name: "ItemInfo",
		components: {
			MyImage,
			RecipeShow,
			BuildShow
		},
		data() {
			return {
				item: {},
				defaultRecipe: null,
				fromRecipe: null,
				toRecipe: null,
				builds: null,
				activeName: "to",
				loading: {},
			}
		},
		watch: {
			"$route.query.id": {
				immediate: true,
				handler(newId) {
					if (newId) {
						this.loadItemDetail(newId);
						this.activeName = 'to';
					}
				}
			}
		},
		methods: {
			loadItemDetail(id) {
				this.$api.get("/item/detail/" + id).then((res) => {
					this.item = res.data.item;
					this.toRecipe = res.data.toRecipe;
					this.fromRecipe = res.data.fromRecipe;
					this.builds = res.data.build;
					this.defaultRecipe = this.toRecipe.find((r) => r.id == this.item.defaultRecipe)
				})
			}
		},
		mounted() {
			this.$version.addListener("ItemInfo", () => {
				this.$router.push({
					path: "/item"
				});
			})
		},
		destroyed() {
			this.$version.removeListener("ItemInfo");
		}
	}
</script>

<style lang="less" scoped>
	// 引入独立样式文件
	@import "@/assets/less/variables.less";

	#main_container {
		width: 100%;
		height: 100%;
		overflow: auto;
		background-color: @color-disabled;

		h1 {
			margin: 0 0 10px;
			color: @color-text;
			font-size: 24px;
			font-weight: 600;
		}

		.info_container {
			width: 90%;
			background-color: white;
			margin: 10px auto;
			border-radius: 10px;
			padding: 20px;
			border: 1px solid #cccece;
			display: flex;
			justify-content: space-around;


			.info_content {
				width: calc(100% - 300px);

				.description {

					.item {
						height: 60px !important;
					}
				}
			}
		}

		.recipe_container {
			width: 90%;
			background-color: white;
			margin: 10px auto;
			border-radius: 10px;
			padding: 20px;
			border: 1px solid #cccece;

			.show {
				width: 90%;
				background-color: white;
				margin: 10px auto;
				border-radius: 10px;
				padding: 20px;
				border: 1px solid #cccece;
			}
		}
	}
</style>